<template>
	<div class="page">
		<div class="home" :class="hasbar?'hasbar':''">
			<div class="head-fixed">
				<div class="downloadsticky" v-if="hasbar">
					<div class="item">
						<i class="left iconfont icon-icon_close_dark" @click="hasbar = false"></i>
						<div class="middle"><i class="iconfont icon-icon_floatbar_phone"></i> Nhấp và tải xuống ứng dụng
						</div>
						<i class="right iconfont icon-icon_download_btn"></i>
					</div>
				</div>
				<div class="header">
					<div class="left">
						<div class="logoBox"><img src="../../assets/images/logo.png"></div>
					</div>
					<div class="rightInfo">
						<div class="money">
							<p>100,000,000 <span class="iconfont icon-icon_refresh_gold_12"></span></p>
							<p>Số dư tài khoản</p>
						</div>
						<van-button class="recharge">Nạp tiền</van-button>
					</div>
				</div>
			</div>
			<div class="banner">
				<van-swipe class="index-swipe" :autoplay="3000" indicator-color="white">
					<van-swipe-item v-for="item in 4" :key="item">
						<img src="../../assets/images/banner.jpg">
					</van-swipe-item>
				</van-swipe>
			</div>
			<div class="index-main">
				<van-tabs v-model="tactive" background="#1b233d" swipe-threshold="6">
					<van-tab>
						<template #title>
							<span class="iconActive icon-home_nav_icon_rec_nor icon-sprite"></span>
						</template>
						<div class="games">
							<div class="todayLottery">
								<div class="title"><a href="javascript:;" class="name">Trò xổ số</a></div>
								<swiper class="lottery-scroll" :options="swiperlottery" ref="swiperlottery">
									<swiper-slide >
										<div class="lottery scroll-item" @click="url('/lotteryA')">
											<div class="countDownBox">
												<span class="iconfont icon-icon_clock"></span><van-count-down :time="time" />
											</div>
											<div  class="numbers "><span >2ỉu</span><span >4</span><span >6</span><span >8</span><span >10</span></div>
											<div class="issue">202111100967</div>
											<img src="../../assets/images/keno20g.png" class="icon" >
											<img src="../../assets/images/btn.png" class="betNow">
										</div>
									</swiper-slide>
									<swiper-slide v-for="(item,index) in 4" :key="index">
										<div class="lottery scroll-item" @click="url('/lotteryB')">
											<div class="countDownBox">
												<span class="iconfont icon-icon_clock"></span><van-count-down :time="time" />
											</div>
											<div  class="numbers keno"><span class="small">Xỉu</span><span class="odd">Lẻ</span><span class="up">Trên</span><span class="wood">Mộc</span><span class="sumTotal">725</span></div>
											<div class="issue">202111100967</div>
											<img src="../../assets/images/keno20g.png" class="icon" >
											<img src="../../assets/images/btn.png" class="betNow">
										</div>
									</swiper-slide>
								</swiper>
							</div>
						</div>
						<div class="games">
							<div class="liveAndSports">
								<div class="homeShow live">
									<div class="title"><a href="javascript:;" class="name">Casino trực tuyến</a></div>
									<swiper class="sw-scroll" :options="swiperscroll" ref="swiperscroll">
										<swiper-slide v-for="(item,index) in 4" :key="index">
											<div class="scroll-item">
												<img src="../../assets/images/live_mglive_home.png">
												<p>BBIN THỂ THAO</p>
											</div>
										</swiper-slide>
									</swiper>
								</div>
							</div>
						</div>
						<div class="games">
							<div class="slotAndFish">
								<div class="title slot"><a href="javascript:;" class="name">Nổ hũ</a></div>
								<ul class="ban-list">
									<li>
										<img src="../../assets/images/no1.png">
									</li>
									<li>
										<img src="../../assets/images/no2.png">
									</li>
									<li>
										<img src="../../assets/images/no3.png">
									</li>
								</ul>
							</div>
						</div>
						<div class="games">
							<div class="liveAndSports">
								<div class="homeShow sports">
									<div class="title"><a href="javascript:;" class="name">Thể thao</a></div>
									<swiper class="sw-scroll" :options="swiperscroll" ref="swiperscroll">
										<swiper-slide>
											<div class="scroll-item">
												<img src="../../assets/images/sports_bbinsports_home.png">
												<p>BBIN THỂ THAO</p>
											</div>
										</swiper-slide>
									</swiper>
								</div>
							</div>
						</div>
						<div class="games">
							<div class="slotAndFish">
								<div class="title fish"><a href="javascript:;" class="name">Bắn cá</a></div>
								<ul class="ban-list">
									<li>
										<img src="../../assets/images/ban1.png">
									</li>
									<li>
										<img src="../../assets/images/ban2.png">
									</li>
									<li>
										<img src="../../assets/images/ban3.png">
									</li>
								</ul>
							</div>
						</div>
					</van-tab>
					<van-tab>
						<template #title>
							<span class="iconActive icon-home_nav_icon_lottery_nor icon-sprite"></span>
						</template>
						<div class="gameListBox games">
							<div class="panel">
								<div class="funcBox">
									<div class="name"><span>Miền Bắc</span><img src="../../assets/images/right-bar.png"></div>
								</div>
								<ul class="gameListUl">
									<li v-for="item in 5" :key="item">
										<div class="gm-box">
											<img src="../../assets/images/men-bac.png">
										</div>
									</li>
								</ul>
							</div>
							<div class="panel">
								<div class="funcBox">
									<div class="name"><span>Miền Nam</span><img src="../../assets/images/right-bar.png">
									</div>
									<div class="filter">
										<van-popover v-model="showPopover" trigger="click" :actions="actions"
											placement="bottom-end" @select="onSelect">
											<template #reference>
												<span>Thứ 4</span><span
													class="iconfont icon-icon_drop_down_solid dropDownIcon"></span>
											</template>
										</van-popover>
									</div>
								</div>
								<ul class="gameListUl">
									<li v-for="item in 5" :key="item">
										<div class="gm-box">
											<img src="../../assets/images/men-bac.png">
										</div>
									</li>
								</ul>
							</div>
							<div class="panel">
								<div class="funcBox">
									<div class="name"><span>Miền Trung</span><img
											src="../../assets/images/right-bar.png"></div>
								</div>
								<ul class="gameListUl">
									<li v-for="item in 5" :key="item">
										<div class="gm-box">
											<img src="../../assets/images/men-bac.png">
										</div>
									</li>
								</ul>
							</div>
							<div class="panel">
								<div class="funcBox">
									<div class="name"><span>Xổ Số VIP</span><img
											src="../../assets/images/right-bar.png"></div>
								</div>
								<ul class="gameListUl">
									<li v-for="item in 5" :key="item">
										<div class="gm-box">
											<img src="../../assets/images/men-bac.png">
										</div>
									</li>
								</ul>
							</div>
							<div class="panel">
								<div class="funcBox">
									<div class="name"><span>Mega 6/45</span><img
											src="../../assets/images/right-bar.png"></div>
								</div>
								<ul class="gameListUl">
									<li v-for="item in 5" :key="item">
										<div class="gm-box">
											<img src="../../assets/images/men-bac.png">
										</div>
									</li>
								</ul>
							</div>
							<div class="panel">
								<div class="funcBox">
									<div class="name"><span>keno</span><img src="../../assets/images/right-bar.png">
									</div>
								</div>
								<ul class="gameListUl">
									<li v-for="item in 5" :key="item">
										<div class="gm-box">
											<img src="../../assets/images/men-bac.png">
										</div>
									</li>
								</ul>
							</div>
						</div>
					</van-tab>
					<van-tab>
						<template #title><span
								class="iconActive icon-home_nav_icon_live_nor icon-sprite"></span></template>
						<div class="game-panel">
							<ul class="lvsport-list">
								<li>
									<img src="../../assets/images/live_sub_mg.png">
								</li>
								<li>
									<img src="../../assets/images/live_aelive_sub.png">
								</li>
								<li>
									<img src="../../assets/images/live_bbinlive_sub.png">
								</li>
							</ul>
						</div>
					</van-tab>
					<van-tab>
						<template #title><span
								class="iconActive icon-home_nav_icon_slot_nor icon-sprite"></span></template>
						<div class="tabGamePage">
							<ul class="tabs">
								<li @click="onTabA(index)" v-for="(item,index) in tabsA" :key="item"
									:class="curA == index?'active':''">{{item}}</li>
							</ul>
							<!-- list -->
							<ul class="gameList">
								<li v-for="item in 10" :key="item">
									<img src="../../assets/images/14008_en.jpg">
									<div class="van-ellipsis">108 Heroes Heroes</div>
								</li>
							</ul>
						</div>
					</van-tab>
					<van-tab>
						<template #title><span
								class="iconActive icon-home_nav_icon_sports_nor icon-sprite"></span></template>
						<div class="game-panel">
							<ul class="lvsport-list">
								<li>
									<img src="../../assets/images/sports_bbinsports_sub.png">
								</li>
							</ul>
						</div>
					</van-tab>
					<van-tab>
						<template #title><span
								class="iconActive icon-home_nav_icon_fish_nor icon-sprite"></span></template>
						<div class="tabGamePage">
							<ul class="tabs">
								<li @click="onTabB(index)" v-for="(item,index) in tabsB" :key="item"
									:class="curB == index?'active':''">{{item}}</li>
							</ul>
							<!-- list -->
							<ul class="gameList">
								<li v-for="item in 10" :key="item">
									<img src="../../assets/images/smg_108heroes_icon_square_600x600_en.png">
									<div class="van-ellipsis">108 Heroes Heroes</div>
								</li>
							</ul>
						</div>
					</van-tab>
				</van-tabs>
			</div>
		</div>
		<div class="dragDialog draggable vdr">
			<a href="" class="custormerServiceLink iconfont icon-icon_customer_service"></a>
		</div>
		<Foot :active="0"></Foot>
		<!-- 公告 -->
		<van-popup v-model="noticeshow" closeable>
			<div class="announcementDialog">
				<div class="dialogMian">
					<div class="didalogHeader"> Thông báo mới nhất </div>
					<div class="announce-panel-wp">
						<div class="tab-wp">
							<div @click="ntCur = 0" class="tab" :class="ntCur == 0?'active':''"><span class="tab-name">&nbsp;&nbsp;Thông báo mới nhất</span></div>
							<div @click="ntCur = 1" class="tab" :class="ntCur == 1?'active':''"><span class="tab-name"> &nbsp;&nbsp;Trungtâm thông báo</span></div>
						</div>
						<div class="announceContent" v-if="ntCur == 0">
							<div class="tab-content-wp">
								<div class="content-wp">
									<div class="content-title-wp">
										<div class="title">Trang web chính thức của công ty</div>
										<div class="time">2021-11-15 16:51:50</div>
									</div>
									<div class="content">★ Trang web chính thức của công ty: Link (1)www.xosobet.com; Link (2) www.xosobet1.com; Link (3) www.xosobet2.com; Link (4)www.xosobet3.com;Link ( 5) www.xosobet4.com;Link ( 6) www.xosobet5.com Để đ</div>
								</div>
							</div>
							<div class="tab-content-wp">
								<div class="content-wp">
									<div class="content-title-wp">
										<div class="title">THÔNG BÁO</div>
										<div class="time">2021-09-09 21:24:26</div>
									</div>
									<div class="content">Chào mừng bạn đến với XOSOBET ! Tên miền chínhthức: xosobet.com,Nhà Cái nổi tiếng hàng đầu CHÂU Á với độ uy tín, bảo mật, côngbằng tỷ lệ cược cao và cực nhiều phúc lợi. Bên cạnh đó XOSOBET CASINO cò</div>
								</div>
							</div>
						</div>
						<div class="announceContent" v-if="ntCur == 1">
							<div class="tab-content-wp">
								<div class="content-wp">
									<div class="content-title-wp">
										<div class="title">THÔNG BÁO</div>
										<div class="time">2021-09-09 21:24:26</div>
									</div>
									<div class="content">Chào mừng bạn đến với XOSOBET ! Tên miền chínhthức: xosobet.com,Nhà Cái nổi tiếng hàng đầu CHÂU Á với độ uy tín, bảo mật, côngbằng tỷ lệ cược cao và cực nhiều phúc lợi. Bên cạnh đó XOSOBET CASINO cò</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</van-popup>
	</div>
</template>

<script>
	import Foot from "@/components/Foot.vue";
	export default {
		components: {
			Foot
		},
		data() {
			return {
				hasbar: true,
				tactive: 0,
				showPopover: false,
				actions: [{
					text: 'Thứ 2'
				}, {
					text: 'Thứ 4'
				}, {
					text: 'Thứ 6'
				}],
				// tab
				curA: 0,
				curB: 0,
				tabsA: ['MG SLOT', 'JDB', 'BBIN'],
				tabsB: ['MG FISH', 'JDB', 'BBIN'],
				swiperlottery: {
					slidesPerView: 'auto',
					spaceBetween: 12,
				},
				swiperscroll: {
					slidesPerView: 'auto',
					spaceBetween: 12,
				},
				time: 30 * 60 * 60 * 1000,
				noticeshow:true,
				ntCur:0,
			}
		},
		methods: {
			url(url) {
				this.$router.push({
					path: url
				})
			},
			onSelect(action) {
				console.log(action.text)
			},
			onTabA(e) {
				this.curA = e
			},
			onTabB(e) {
				this.curB = e
			}
		}
	}
</script>
<style>
</style>
